// ======= VARIABLES =======
$o-wblog-read-width: 620px;
$o-wblog-read-container-sidebar-width :900px;
$o-wblog-loader-size: 50px;

$o-wblog-title-sizes-variants: (
    tiny: (
        title: $display4-size*0.6,
        subtitle: $lead-font-size
    ),
    small: (
        title: $display4-size*0.75,
        subtitle: $lead-font-size
    ),
    big: (
        title: $display3-size,
        subtitle: $lead-font-size*1.25
    ),
    huge: (
        title: $display2-size,
        subtitle: $lead-font-size*1.5
    ),
    hero: (
        title: $display1-size,
        subtitle: $lead-font-size*1.75
    )
) !default;

// ======= ANIMATIONS =======
// Attention keeper for the "scroll down" top-banner button
@keyframes o-wblog-anim-heart {
    0%, 14%, 35% { transform: scale(1); }
    7%, 21% {
        transform: scale(1.3);
        background-color: rgba(theme-color('primary'), 0.8);
    }
}

// Generic fade-in
@keyframes o-wblog-fade-In {
    0%   { opacity: 0; }
    100% { opacity: 1; }
}

@keyframes o-wblog-loader {
    0%, 100% {
        animation-timing-function: cubic-bezier(0.5, 0, 1, 0.5);
    }
    0% {
        transform: rotateY(0deg);
    }
    50% {
        transform: rotateY(1800deg);
        animation-timing-function: cubic-bezier(0, 0.5, 0.5, 1);
    }
    100% {
        transform: rotateY(3600deg);
    }
}


// ======== MIXINS =========
// Create easing-linear-gradients. Compared to the standards liner-gradients
// these are smoother and blends into their context increasing readability when
// acts as background for text placed over images.
// based on: https://css-tricks.com/easing-linear-gradients/
@mixin o-wbblog-scrim-gradient($colorFrom, $colorTo) {
    $scrimStops: 0% 0%, 26.2% 19%, 45.9% 34%, 61.8% 47%, 72.2% 56.5%, 80.6% 65%, 87.4% 73%, 92.5% 80.2%, 95.8% 86.1%, 97.9% 91%, 99.2% 95.2%, 99.8% 98.2%, 100% 100%;
    $stops: ();
    @each $scrimStop in $scrimStops {
        $stops: append($stops, mix($colorTo, $colorFrom, nth($scrimStop, 1)) nth($scrimStop, 2), comma)
    }

    background-image: linear-gradient(#{$stops});
}

//------------------------------------------------------------------------------
// Website Blog
//------------------------------------------------------------------------------
.website_blog {
    .css_website_mail {
        .o_has_error {
            border-color: red;
        }
        .css_nav_month {
            display: none;
            &:first-of-type {
                display: block;
            }
        }
    }

    .o_wblog_page_cards_bg {
        // To be applied to the main container when 'card design' option is
        // enabled. Provide a slight darker bg that will blend the background
        // color chosen by the user, visually increasing the contrast in case of
        // brights (or white) backgrounds.
        // It shouldn't be noticeable on dark backgrounds.
        background-color: rgba(black, 0.005);
    }

    .o_wblog_read {
        max-width: $o-wblog-read-width;
    }

    .o_wblog_read_with_sidebar {
        max-width: $o-wblog-read-container-sidebar-width;
    }

    // This option class is assigned to the post's content using the "Customize"
    // menu. The aim is to be able to write simple articles on the fly,
    // achieving a good design without being forced to use snippets.
    .o_wblog_read_text {
        font-size: 18px;
        line-height: 28px;
        font-weight: 300;

        p, ul, ol {
            margin-bottom: 1.55em;
        }

        li {
            margin-bottom: 1em;
        }

        .lead {
            font-size: 26px;
            line-height: 34px;
            margin-bottom: 40px;
        }
    }

    .o_wblog_author_avatar {
        width: 1.2em;
        height: 1.2em;
        max-width: none;
        object-fit: cover;
    }

    .o_wblog_author_avatar_date {
        // Resize in order to double the current font-size and accommodate
        // two text lines, name and date.
        width: 2em;
        height: 2em;
        max-width: none;
        object-fit: cover;
    }

    .o_wblog_social_links > a {
        @include size(3em);
        > i {
            font-size: 1.3em;
        }
    }

    // Blog Post Page
    // ==============================================
    #o_wblog_post_content {
        min-height: 350px !important;

        a.oe_mail_expand:after {
            content: " →";
        }
        a.oe_mail_expand {
            font-weight: bold;
        }
    }

    #o_wblog_post_comments {
        .o_portal_chatter > hr {
            display: none;
        }
    }

    // Blog Post Page Cover
    // ==============================================
    .o_wblog_post_page_cover {
        // By default (no image defined), inner filters elements are hidden.
        .o_record_cover_component {
            display: none;
        }

        // If a cover image is defined, show filters + adapt inner typography
        &.o_record_has_cover {
            .o_record_cover_image:after {
                content: "";
                display: block;
                @include o-position-absolute(0,0,50%,0);
                @include o-wbblog-scrim-gradient(rgba(black, 0.5), transparent);
            }
            .o_record_cover_component {
                display: block;
            }

            .o_wblog_post_title {
                color: white;
            }

            #o_wblog_post_content_jump {
                @include size($o-wblog-loader-size);
                display: none;
                background-color: rgba(black, 0.5);

                &:hover {
                    background-color: rgba(black, 0.7);
                }
            }

            // Cover sizes
            // ==============================================
            &.cover_full {
                min-height: 600px;
                min-height: 100vh;
            }

            &.cover_mid {
                min-height: 400px;
                min-height: 55vh;
            }

            &.cover_full, &.cover_mid {
                #o_wblog_post_content_jump {
                    display: flex;
                    animation: o-wblog-anim-heart 2.6s ease-in-out 1s infinite;

                    &:hover {
                        animation-iteration-count: 1;
                    }
                }
            }

            &.cover_auto {
                padding: 3rem 0;
                // The actual height will always be 'auto'. The following
                // min-height rule is set to trigger the page transition only.
                min-height: 1px;
            }

            // "Regular Cover" design sizes
            // ==============================================
            &.o_wblog_post_page_cover_regular {
                .o_record_cover_image:after {
                    visibility: hidden;
                }

                &.cover_full {
                    min-height: 350px;
                }

                &.cover_mid {
                    min-height: 250px;
                }

                &.cover_auto {
                    min-height: 150px;
                    padding: 0;
                }
            }
        }

    }

    // Blog Post Specific
    // ==============================================
    .o_wblog_post_title {
        #o_wblog_post_name {
            font-weight: $display4-weight;
            line-height: $display-line-height;
            // Default font-size.
            @include font-size($display4-size);
        }

        #o_wblog_post_subtitle {
            font-weight: $lead-font-weight;
            // Default font-size.
            @include font-size($lead-font-size);
        }
    }

    // Size variants
    @each $size, $map in $o-wblog-title-sizes-variants {
        .o_record_cover_font_#{$size} .o_wblog_post_title {
            #o_wblog_post_name {
                @include font-size(map-get($map, title));
            }
            #o_wblog_post_subtitle {
                @include font-size(map-get($map, subtitle));
            }
        }
    }

    // Refine multi-lines titles when using 'regular' cover
    .o_wblog_regular_cover_container #o_wblog_post_name {
        line-height: 1;
        padding-bottom: 0.5rem;
    }

    .o_wblog_post_page_cover_footer {
        min-height: 33vh;
        // Emulate native jQuery 'swing' easing to match js code
        transition: all 0.3s cubic-bezier(.02, .01, .47, 1);
    }

    #o_wblog_next_container {
        background-color: $body-bg;
        cursor: pointer;

        .o_wblog_next_loader {
            transform: translateZ(1px);

            div {
                @include size($o-wblog-loader-size);
                margin-top: $o-wblog-loader-size * -2;
                background: rgba(black, 0.15);
                animation: o-wblog-loader 2.4s cubic-bezier(0, 0.2, 0.8, 1) infinite;
            }
        }

        .o_wblog_next_fake_btn {
            height: $o-wblog-loader-size;
        }
    }

    #o_wblog_post_main.o_wblog_post_main_transition {
        animation: o-wblog-fade-In 1s cubic-bezier(.02, .01, .47, 1);
    }

    // Blog Index Pages
    // ==============================================
    #o_wblog_posts_loop {
        .o_record_cover_container {
            box-shadow: inset 0 0 0 1px rgba(white, 0.3);
            background: rgba(black, 0.1);

            padding-top: 33%;
            height: auto!important;

            &:hover .o_record_cover_image {
                opacity: 0.8;
            }
        }

        .o_wblog_normalize_font {
            // normalize fonts
            font-size: 13px;
            line-height: 1.45;
        }

        .o_wblog_post_list_author {
            @include o-wbblog-scrim-gradient(transparent, rgba(black, 0.5));
        }

        &.o_wblog_list_view {
            .o_record_cover_container {
                padding-top: 20%;
            }
            .o_wblog_post_cover_nocard .o_record_cover_container {
                padding-top: 33%;
            }
        }

    }

    //  Editor Helpers
    // ==============================================
    body.editor_enable & {
        // Make empty covers visible in edit mode
        .o_record_cover_container.o_wblog_post_page_cover:not(.o_record_has_cover) {
            background-color: $gray-100;
            padding: 30px 0;
            border: 1px dashed $gray-500;
        }

        // Hide the big "DRAG BUILDING BLOCKS HERE" box when inside a sidebar.
        // The purple lines are enough to help the user dropping snippets.
        #o_wblog_sidebar .oe_structure:empty {
            display: none;
        }
    }
}


//------------------------------------------------------------------------------
// Latest posts snippets
//------------------------------------------------------------------------------
.s_latest_posts, .s_latest_posts_big_picture {
    .s_latest_posts_loader {
        @include o-position-absolute(0, 0, 0, 0);
        transform: translateZ(1px);

        > div {
            animation: o-wblog-loader 2.4s cubic-bezier(0, 0.2, 0.8, 1) infinite;
            max: {width: 30px; height: 30px;}
        }
    }

    .s_latest_posts_post_title  {
        font-weight: $headings-font-weight;
        // Tweek line-height to help fit multi-line titles.
        line-height: 1;
    }

    .s_latest_posts_post_subtitle {
        font-size: 1em;
    }
}

.s_latest_posts {
    // Set sizes relative to the container font-size.
    // (handle parents with, for example, '.small' or '.h1' classes)
    .s_latest_posts_post_cover {
        @include size(3.5em);
        max: {width: 85px; height: 85px}
    }

    .s_latest_posts_post_title  {
        font-size: 1.25em;
    }
}

.s_latest_posts_big_picture {
    .s_latest_posts_post {
        min-height: 150px;

        figcaption {
            position: relative;
            justify-content: center;
        }

        .s_latest_posts_post_cover {
            min-height: 100%;

            .o_record_cover_container {
                top: 0;
            }
        }

        .s_latest_posts_post_title  {
            @include font-size($h3-font-size);
            margin-bottom: 0.5em;
            word-spacing: -0.15em;
        }

        @include s-latest-posts-figure-hook;
    }

    .js_get_posts {
        @include s-latest-posts-js-get-posts-hook;
    }
}
